<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<link rel="stylesheet" href="../css/sy.css">
	</head>
	<style>
		body {
			/* 背景图垂直、水平均居中 */
			background-position: center center;
			/* 背景图不平铺 */
			background-repeat: no-repeat;
			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;
			/* 让背景图基于容器大小伸缩 */
			background-size: cover;
			/* 设置背景颜色，背景图加载过程中会显示背景色 */
			background-color: white;
		}

		* {
			text-decoration: none;
		}

		.box {
			text-align: center;
		}

		.t_img {
			width: 75px;
			height: 75px;
			border-radius: 100%;
		}

		.s_box {
			border-radius: 10px;
			width: 500px;
			height: auto;
			border: 1px #c2c2d6 solid;
			margin-left: 430px;
			background-color: #c2c2d6;
			position: fixed;
			display: none;
		}

		.s_box img {
			width: 61px;
			height: 61px;
			margin: 5px;
			border: 1px solid #ccc;
		}

		.s_box img:hover {
			border-color: red;
			transform: scale(1.25);
			transition: .5s;
		}

		.header {
			width: 100%;
			text-align: center;
			font-size: 14px;
			margin-top: 30px;
		}

		.close {
			color: #000;
			font-size: 21px;
			opacity: .7;
			position: absolute;
			right: 8px;
			top: 1px;
			cursor: pointer;
		}

		.bt_box .gb {
			display: inline-block;
			width: 80px;
			height: 35px;
			border-radius: 10px;
			background: #f3f3f3;
			color: #444;
			line-height: 35px;
			margin: 10px;
		}

		.bt_box .queren {
			display: inline-block;
			width: 80px;
			height: 35px;
			border-radius: 10px;
			background: #1a53ff;
			color: white;
			line-height: 35px;
		}

		.bt_box .gb:hover,
		.bt_box .queren:hover {
			box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.24), 0 9px 25px 0 rgba(0, 0, 0, 0.19);
		}

		#sbox {
			margin: 0 auto;
			width: 100%;
			z-index: 999;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">修改编辑</h1>
		</header>
		<div class="mui-content" style="background-color:rgba(0,0,0,0);">
			<div class="box" style="margin-top: 30px;">
				<h2 style="color: black; font-size: 20px;">点击图片图片更换头像</h1>
					<div class="ft_img" id="ft_img">
						<img src="../images/avatar.png" class="t_img" />
					</div>
					<div class="s_box" id="sbox">
						<div class="header">
							<p>设置头像</p>
							<span class="close" id="close">x</span>
						</div>
						<hr width="80%" color="#e0e0eb" />
						<div id="t_img">
							<img src="./img/01.png" />
							<img src="./img/02.png" />
							<img src="./img/03.png" />
							<img src="./img/04.png" />
							<img src="./img/05.png" />
							<img src="./img/06.png" />
							<img src="./img/07.png" />

						</div>
						<hr width="80%" color="#e0e0eb" />
						<div class="bt_box">
							<input type="file" name="file0" id="file0" accept="image/*" />
							<a class="gb" href="javascript:" id="hide">关闭</a>
							<a class="queren" href="javascript:" id="but">保存头像</a>
						</div>
					</div>
			</div>
			<div style="display: flex; margin: 0 auto;width: 22rem;">
				<span style="width: 5.5rem;padding: 0.3rem 0; font-size: 14px;">更改名字</span>
				<input style="width: 13rem;height: 2rem;" id="name" type="text">
				<!-- <input style="width: 5rem;height: 2rem; border-left: none;" type="button" id="geng" value="确认"> -->
			</div>
			<input style="width: 10rem;border-radius: 1.875rem;display: block;margin: 20px auto;" id="an" type="button"
				value="点击修改">
		</div>
	</body>
	<script type="text/javascript">
		/* 隐藏，显现效果 */
		$(".t_img").click(function() {
			$("#sbox").show("slow");
		});
		$("#hide").click(function() {
			$("#sbox").hide("slow");
		});
		$("#close").click(function() {
			$("#sbox").hide("slow");
		});
		/*  选定图像获取图像src值 */
		var $t_img = document.getElementById('t_img');
		var $img = $t_img.getElementsByTagName('img');
		var index = 0;
		for (var i = 0; i < $img.length; i++) {
			$img[i].index = i;
			$img[i].onclick = function() {
				$img[index].style.borderRadius = "15%";
				$img[index].style.border = "none"
				this.style.borderRadius = "50%";
				this.style.border = "1px solid red"
				index = this.index;
				var $newsrc = $img[index].src;
				$(".t_img").attr('src', $newsrc);
			}
		}
		

		// 讲选中的图片替换头像的图片
		$("#file0").change(function() {
			var objUrl = getObjectURL(this.files[0]);
			if (objUrl) {
				$(".t_img").attr("src", objUrl);
			}
		});
		//创建一个可存取到该file的url  
		function getObjectURL(file) {
			var url = null;
			// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
			if (window.createObjectURL != undefined) { // basic  
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)  
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome  
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
		
		// 点击确认修改按钮更换头像
		$("#but").click(function() {
			$("#sbox").hide("slow");
			var img = $('#ft_img').find("img").prop("src")
			localStorage.setItem('img', JSON.stringify(img))
			console.log(img);
		})
		
		// 点击修改 
		$('#an').on('tap', function() {
			if ($('#name').val() !== '') {
				let name = $('#name').val()
				localStorage.setItem('name',name)
				alert('修改成功')
				location.href = '../index.html'
			}
		})

		// $('#an').on('tap',function(){


		// 	location.href='own.html'
		// })
	</script>
</html>